import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useThemeStore } from '../../stores/themeStore';
import { getTheme } from '../../theme/config';

const ThemeToggle: React.FC = () => {
  const { mode, toggleTheme } = useThemeStore();
  const theme = getTheme(mode);
  const isDark = mode === 'dark';

  return (
    <div style={{
      width: '100%',
      padding: '16px 8px',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      gap: '12px'
    }}>
      {/* 状态文字 */}
      <AnimatePresence mode="wait">
        <motion.div
          key={mode}
          initial={{ opacity: 0, y: -10 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: 10 }}
          transition={{ duration: 0.3 }}
          style={{
            fontSize: '12px',
            fontWeight: '500',
            color: theme.textPrimary,
            textAlign: 'center'
          }}
        >
          {isDark ? '夜间模式 🌙' : '日间模式 ☀️'}
        </motion.div>
      </AnimatePresence>

      {/* 滑块按钮容器 - 根据主题背景调整 */}
      <div style={{
        background: theme.siderBackground, // 确保这个值正确更新
        backdropFilter: 'blur(15px)',
        borderRadius: '24px',
        padding: '6px',
        boxShadow: isDark ? '0 4px 12px rgba(0, 0, 0, 0.3)' : '0 4px 12px rgba(0, 0, 0, 0.1)',
        border: `1px solid ${theme.siderBorderColor}`
      }}>
        {/* 滑块按钮 */}
        <motion.button
          onClick={toggleTheme}
          style={{
            position: 'relative',
            width: '100px',
            height: '40px',
            backgroundColor: isDark ? '#374151' : '#d1d5db',
            borderRadius: '20px',
            border: 'none',
            cursor: 'pointer',
            padding: '3px',
            outline: 'none',
            boxShadow: 'inset 0 2px 4px rgba(0, 0, 0, 0.1)'
          }}
          whileHover={{ scale: 1.02 }}
          whileTap={{ scale: 0.98 }}
          animate={{
            backgroundColor: isDark ? '#374151' : '#d1d5db'
          }}
          transition={{ duration: 0.3 }}
        >
          {/* 滑块圆形按钮 */}
          <motion.div
            style={{
              width: '34px',
              height: '34px',
              backgroundColor: '#ffffff',
              borderRadius: '50%',
              boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              position: 'relative'
            }}
            animate={{
              x: isDark ? 63 : 0, // 从0滑动到63px，实现完整的左到右滑动（100px - 34px - 3px padding）
              backgroundColor: isDark ? '#4b5563' : '#ffffff'
            }}
            transition={{
              type: "spring",
              stiffness: 500,
              damping: 30
            }}
          >
            {/* 图标动画 */}
            <motion.div
              animate={{
                rotate: isDark ? 360 : 0
              }}
              transition={{ duration: 0.5 }}
              style={{
                width: '16px',
                height: '16px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center'
              }}
            >
              {isDark ? (
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
                  <path
                    d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"
                    stroke="white"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              ) : (
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
                  <circle cx="12" cy="12" r="5" fill="#fcd34d" />
                  <path
                    d="M12 1v6m0 6v6m11-7h-6m-6 0H1"
                    stroke="#fcd34d"
                    strokeWidth="2"
                    strokeLinecap="round"
                  />
                </svg>
              )}
            </motion.div>
          </motion.div>
        </motion.button>
      </div>
    </div>
  );
};

export default ThemeToggle;